<template>
    <div class="edit-popup" style="width: 50vw">
        <popup
            ref="popupRef"
            title="点名明细"
            :async="true"
            width="50vw"
			:cancelButtonText="false"
			:confirmButtonText="false"
            @close="handleClose"
        >
            <div class="popup-div">
				<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">

					<el-form-item label="用户ID">
					    <el-input
					            class="w-[150px]"
					            v-model="queryParams.uuid"
					            placeholder="请输入用户ID"
					            clearable
					            @keyup.enter="resetPage"
					    />
					</el-form-item>

				    <el-form-item>
				        <el-button type="primary" @click="resetPage">查询</el-button>
				    </el-form-item>
				</el-form>
                <div class="table-div" style="overflow-y: auto">
					<el-tabs  class="demo-tabs">
					    <!-- 表格 -->
					    <el-table
					        size="large"
					        :data="pager.lists"
					        @selection-change="handleSelectionChange"
					    >
							<el-table-column label="用户ID / 手机号 / 昵称" prop="days" min-width="200" >
								<template #default="{ row }">
									 {{ row.uuid }} / {{ row.phone }} / {{ row.nickname }}
								</template>
							</el-table-column>
							<el-table-column label="直播房间号" prop="room_id" min-width="150" />
					        <el-table-column label="点名唯一标识" prop="sign_check" min-width="150" />
							<el-table-column label="是否签到"  min-width="120" >
								<template #default="{ row }">
									 {{ row.is_sign==1?'已签到':'未签到' }}
								</template>
							</el-table-column>
							<el-table-column label="是否发放积分券" prop="days" min-width="120" >
								<template #default="{ row }">
									 {{ row.is_reward==1?'已发放':'未发放' }}
								</template>
							</el-table-column>
					    </el-table>
						<div class="flex justify-end mt-4">
						    <pagination v-model="pager" @change="getLists" />
						</div>
					</el-tabs>
                </div>
            </div>
        </popup>
    </div>
</template>
<script lang="ts" setup>
    import { usePaging } from '@/hooks/usePaging'
    import Popup from '@/components/popup/index.vue'
	import feedback from '@/utils/feedback'
	import { clockDetailList,decContinuousReward} from '@/api/consumer'
    const emit = defineEmits(['success', 'close'])
    const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const queryParams = reactive({
	    start_time: '',
		end_time:'',
		room_id:'',
		sign_check:'',
		uuid:'',
		user_keyword:''
	});
	const { pager, getLists,resetPage} = usePaging({
	    fetchFun: clockDetailList,
	    params: queryParams
	});
    // 打开弹窗
    const open = (data:any[]) => {
		queryParams.sign_check = data.sign_check
		queryParams.room_id = data.room_id
		getLists()
        popupRef.value?.open();
    };
	const ids = ref<any[]>([])
	const handleSelectionChange = (val: any[]) => {
	    ids.value = val.map((item) => {
	        return item.id
	    })
	}
    // 取消弹窗
    const handleClose = () => {
        emit('close', 0)
    };

    //提交
    defineExpose({
        open
    });
</script>

<style lang="scss" scoped>
    .popup-div {
        height: 60vh;
        display: flex;
        flex-direction: column;
        .popup-div-title {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #ffffff
        }
    }
</style>
